import { useState ,SetStateAction, useTransition} from "react"

interface Props{
    query:string
}

function List({ query }:Props) {
    const items = []
    const word = 'hello world'
    if (query !== '' && word.includes(query)) {     
        const arr = word.split(query)
        for (let i = 0; i < 20000; i++){
            items.push(<li key={i}>{arr[0]}<span style={{ color: 'red' }}>{query}</span>{ arr[1]}</li>)
        }
    } else {
        for (let i = 0; i < 20000; i++){
            items.push(<li key={i}>{word}</li>)
        }
    }
    return (
        <ul> 
            {items}
        </ul>
    )
}

export default function App() {
    const [search, setSearch] = useState('')
    const [query, setQuerry] = useState('')
    const [pending,startTransition] = useTransition()
    const handleChange = (e: { target: { value: SetStateAction<string> } }) => {
        //1.紧急
        setSearch(e.target.value)
        //2.非紧急任务
        startTransition(() => {
            setQuerry(e.target.value)
        })
    }
    return (
        <>
            <h1>hello StartTranslation</h1>
            <input type="text" value={search} onChange={handleChange} />
            {pending && <div>loading...</div>}
            <List query = {query}></List>
        </>
    )
}